<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>heatmap热力图</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.0/heatmap.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #heatmap-container {
            width: 100%;
            height: 100%;
            background-color: beige;
        }
    </style>
</head>

<body>
    <div id="heatmap-container"></div>
    <script>
        const heatmapContainer = document.getElementById('heatmap-container');
        let heatmap = h337.create({
            container: heatmapContainer,
            maxOpacity: 0.8,
            radius: 20,
            blur: 0.75
        });

        const generateData = () => {
            const data = [];
            for (let i = 0; i < 100; i++) {
                const point = {
                    x: Math.floor(Math.random() * 1291) + 10, // 10-1300
                    y: Math.floor(Math.random() * 691) + 10,  // 10-700
                    value: Math.floor(Math.random() * 101)    // 0-100
                };
                data.push(point);
            }
            return data;
        };

        heatmap.setData({
            min: 0,
            max: 100,
            data: generateData()
        });

    </script>
</body>

</html>